import {
  Button,
  Card,
  Divider,
  Flex,
  Form,
  Input,
  message,
  Radio,
  Space,
  Upload,
} from "antd";
import Header from "../../components/Header/Header.tsx";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../store";
import ImgCrop from "antd-img-crop";
import { useEffect, useState } from "react";
import { UploadOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import {
  getUserInfoUsingGet,
  updateUserinfoUsingPost,
} from "../../api/userController.ts";
import { setLoginUser } from "../../store/loginUser.tsx";

export default function UserInfoView() {
  let userInfo = useSelector((state: RootState) => state.loginUser);
  const [fileList, setFileList] = useState([]);
  const [form] = Form.useForm(); // 使用 Form 实例来获取表单数据
  const navigate = useNavigate();
  const dispatch = useDispatch();

  useEffect(() => {
    if (userInfo.avatarUrl) {
      // 初始化头像
      setFileList([
        {
          uid: "-1", // 每个文件必须有唯一的 uid
          name: "avatar", // 文件名称
          status: "done", // 状态为 done，表示上传完成
          url: userInfo.avatarUrl, // 用户的头像 URL
        },
      ]);
    }
  }, [userInfo.avatarUrl]);

  // 处理上传变更
  const onChange = ({ fileList: newFileList }) => {
    setFileList(newFileList);
  };

  // 处理上传前的验证
  const beforeUpload = (file) => {
    // 限制上传的文件类型为图片
    const isImage = file.type.startsWith("image/");
    if (!isImage) {
      message.error("请上传图片文件！");
    }
    return isImage;
  };

  const changeUserInfo = async (values) => {
    try {
      if (fileList.length < 1) {
        message.error("上传图片为空");
      }
      const res = await updateUserinfoUsingPost({
        ...values,
        avatarUrl: userInfo.avatarUrl, // 使用最新的头像 URL
      });
      if (res.code == 200) {
        message.success("修改用户信息成功！");
        const result = await getUserInfoUsingGet();
        dispatch(setLoginUser(result.data));
        navigate("/home", { replace: true });
      }
    } catch (e) {
      message.error(e.message);
    }
  };

  // 获取 session 信息（例如从 localStorage 或 cookies 中）
  const getSessionInfo = () => {
    return (
      "Webstorm-80cf4c34=e56559b8-7647-46e3-a37e-52745903d4cf; xinggui-init-token=" +
        document.cookie
          .split("; ")
          .find((cookie) => cookie.startsWith("xinggui-init-token="))
          ?.split("=")[1] || ""
    );
  };

  return (
    <div className={""}>
      <Header></Header>
      <Flex>
        <div className={"w-[1400px] m-auto mt-2 shadow pl-2 pr-2"}>
          <Card>
            <h1 className={"text-xl font-bold"}>修改用户信息</h1>
            <Divider></Divider>
            <div>
              <Form
                form={form} // 绑定 form 实例
                layout="horizontal"
                labelCol={{ span: 2 }}
                onFinish={changeUserInfo} // 提交表单时调用 changeUserInfo
              >
                {/* 用户ID */}
                <Form.Item label="用户ID" name="id">
                  <p>{userInfo.id}</p>
                </Form.Item>
                {/* 用户头像上传 */}
                <Form.Item
                  label="用户头像"
                  name={"avatarUrl"}
                  valuePropName="fileList" // 绑定 `fileList`
                >
                  <ImgCrop rotationSlider>
                    <Upload
                      action="http://localhost:8102/api/file/upload" // 替换为实际上传 API 地址
                      listType="picture-card"
                      fileList={fileList}
                      onChange={onChange}
                      beforeUpload={beforeUpload}
                      maxCount={1} // 限制只能上传一个文件
                      onPreview={(file) => {
                        // 预览上传的图片
                        window.open(file.url);
                      }}
                      // 自定义上传请求，携带 biz 信息和 token
                      customRequest={(options) => {
                        const { onSuccess, onError, file } = options;

                        // 创建 FormData 实例
                        const formData = new FormData();
                        formData.append("file", file); // 添加文件
                        formData.append("biz", "user_avatar"); // 添加 biz 信息
                        // 发送上传请求
                        fetch("http://localhost:8102/api/file/upload", {
                          method: "POST",
                          headers: {
                            // 你可以在这里添加其他自定义头部，但 Cookie 会自动发送
                            // 例如：
                            Cookie: getSessionInfo(),
                          },
                          body: formData, // 通过 FormData 发送文件和数据
                          credentials: "include", // 使请求携带 Cookies（用于跨域请求）
                        })
                          .then((response) => response.json()) // 处理响应
                          .then((data) => {
                            // 上传成功
                            // 上传成功后，通过 dispatch 来更新 loginUser
                            const newAvatarUrl = data.data;
                            dispatch(
                              setLoginUser({
                                ...userInfo, // 保留原有的 userInfo 数据
                                avatarUrl: newAvatarUrl, // 更新头像 URL
                              }),
                            );
                            console.log(userInfo);
                            setFileList([
                              {
                                uid: "-1", // 每个文件必须有唯一的 uid
                                name: "avatar", // 文件名称
                                status: "done", // 状态为 done，表示上传完成
                                url: userInfo.avatarUrl, // 用户的头像 URL
                              },
                            ]);
                          })
                          .catch((error) => {
                            // 上传失败
                            onError && onError(error);
                          });
                      }}
                    >
                      {fileList.length < 1 && (
                        <div>
                          <UploadOutlined />
                          <p>点击上传</p>
                        </div>
                      )}
                    </Upload>
                  </ImgCrop>
                </Form.Item>
                {/* 昵称 */}
                <Form.Item
                  label="昵称"
                  name="nickName"
                  initialValue={userInfo.nickName} // 使用 initialValue 来设置默认值
                  rules={[{ required: true }]}
                >
                  <Input />
                </Form.Item>

                {/* 地址 */}
                <Form.Item label="地址" name="address">
                  <p>{userInfo.address}</p>
                </Form.Item>

                {/* 邮箱 */}
                <Form.Item
                  label="邮箱"
                  name="email"
                  initialValue={userInfo.email} // 使用 initialValue 来设置默认值
                  rules={[{ required: true }]}
                >
                  <Input />
                </Form.Item>

                {/* 性别 */}
                <Form.Item
                  label="性别"
                  name="gender"
                  initialValue={userInfo.gender} // 使用 initialValue 来设置默认值
                  rules={[{ required: true }]}
                >
                  <Radio.Group>
                    <Radio value={0}>女</Radio>
                    <Radio value={1}>男</Radio>
                  </Radio.Group>
                </Form.Item>

                {/* 手机号码 */}
                <Form.Item
                  label="手机号"
                  name="phone"
                  initialValue={userInfo.phone} // 使用 initialValue 来设置默认值
                  rules={[{ required: true }]}
                >
                  <Input />
                </Form.Item>

                {/* 微信号 */}
                <Form.Item
                  label="微信号"
                  name="wxCode"
                  initialValue={userInfo.wxcode} // 使用 initialValue 来设置默认值
                  rules={[{ required: true }]}
                >
                  <Input />
                </Form.Item>

                {/* 创建年份 */}
                <Form.Item label="创建年份" name="createYear">
                  <p>{userInfo.createTime}</p>
                </Form.Item>

                {/* 用户简介 */}
                <Form.Item
                  label="用户简介"
                  name="userProfile"
                  initialValue={userInfo.userProfile} // 使用 initialValue 来设置默认值
                  rules={[{ required: true }]}
                >
                  <Input.TextArea rows={3} />
                </Form.Item>

                <div className={"flex justify-end"}>
                  <Space>
                    <Button
                      color="primary"
                      variant="outlined"
                      style={{ borderRadius: 3 }}
                      onClick={() => {
                        navigate(-1);
                      }}
                    >
                      取消
                    </Button>
                    <Button
                      color="primary"
                      variant="solid"
                      style={{ borderRadius: 3 }}
                      htmlType="submit" // 提交表单
                    >
                      修改信息
                    </Button>
                  </Space>
                </div>
              </Form>
            </div>
          </Card>
        </div>
      </Flex>
    </div>
  );
}
